<template>
  <div>
    <div>
      <span>签约类型：</span>
      <span v-if="hasItem">{{ isOnlineSign === '1' ? '线上' : '线下' }}</span>
      <el-radio-group
        v-else
        v-model="isOnlineSign"
        :disabled="loading || !editable"
        @change="handleSignTypeChange"
      >
        <el-radio label="1">线上</el-radio>
        <el-radio label="2">线下</el-radio>
      </el-radio-group>
    </div>
    <div v-show="isOnlineSign === '1'" class="mt-3">
      <p class="text-muted" v-if="isSignStart">请等待客户签章</p>
      <el-button type="primary" size="small" class="btn-long" v-if="docId" @click="handleSignView">
        查看担保申请书
      </el-button>
      <el-button @click="handleCopy(customerUrl)" class="mr-2">
        <i class="fa fa-link"></i>
        复制链接
      </el-button>
      <el-popover placement="top-start" title="客户签约地址" trigger="hover">
        <div>
          <qr-code :value="customerUrl" :size="140"></qr-code>
        </div>
        <el-button slot="reference">
          <i class="fa fa-qrcode"></i>
          扫描二维码
        </el-button>
      </el-popover>
    </div>
    <div v-show="isOnlineSign === '2'" class="mt-3">
      <attach-upload
        :tags="[tag]"
        :batch-no="relatedId"
        :show-label="false"
        :view-mode="viewMode"
        v-bind="$listeners"
        @after-data="handleAfterData"
      ></attach-upload>
    </div>

    <el-dialog
      :visible.sync="viewSignVisible"
      :close-on-click-modal="false"
      append-to-body
      top="30px"
      width="1000px"
      title="担保申请书"
      class="dialog-sm"
    >
      <pdf-view
        down-name="担保申请书"
        :contract-id="docId"
        view-mode
        :query-id="relatedId"
      ></pdf-view>
    </el-dialog>

    <el-dialog
      :visible.sync="onlineVisible"
      :close-on-click-modal="false"
      append-to-body
      width="600px"
      title="线上签约"
      class="dialog-sm"
    >
      <el-alert show-icon type="warning" class="mb-3" title="注意">
        线上签约
        <span class="text-danger">需要客户线上签章</span>
        后才能完成资料要件上传。
        <!-- 而且选择后
        <span class="text-danger">不能再更改签约类型</span>
        。 -->
      </el-alert>
      <div class="row">
        <div class="col-3">
          <div class="text-right pt-2">贷款银行：</div>
        </div>
        <div class="col-9">
          <select-banks
            :project-type="projectData.gua_type"
            v-model="onlineBankId"
            @select="handleSelectBank"
            v-if="!viewMode"
            placeholder="请选择贷款银行"
            class="form-control-ml"
          ></select-banks>
        </div>
      </div>
      <div class="row mt-4">
        <div class="col-3"></div>
        <div class="col-9">
          <el-button
            type="primary"
            class="btn-long"
            :loading="onlineLoading"
            @click="updateOnlineType"
          >
            确定
          </el-button>
          <el-button class="btn-long" :disabled="onlineLoading" @click="handleBankDismiss">
            取消
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import AttachUpload from '@/bank/components/attach/Upload'

import PdfView from '@/credit/views/county/unionProvince/components/PdfView'
import SelectBanks from '@/credit/components/select/SelectOrgBank'
import { copyText } from '@vimi/utils-tool'
export default {
  components: {
    AttachUpload,
    SelectBanks,
    PdfView,
  },
  props: {
    viewMode: Boolean,
    bankId: String,
    projectData: {
      type: Object,
      default: () => ({}),
    },
    signData: {
      type: Object,
      default: () => ({}),
    },
    tag: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      isOnlineSign: '0',
      loading: false,
      viewSignVisible: false,
      //
      onlineVisible: false,
      onlineBankId: '',
      onlineSelectBank: {},
      onlineLoading: false,
    }
  },
  computed: {
    relatedId() {
      return this.projectData.customer_related_id
    },
    relatedSignType() {
      return this.projectData.is_online_sign || '0'
    },
    hasItem() {
      return +this.projectData.item_status !== 0
    },
    docId() {
      return this.signData.doc_id
    },
    isSignStart() {
      return +(this.signData.sign_status || 0) < 2
    },
    editable() {
      return !this.hasItem && !this.viewMode && +(this.signData.sign_status || 0) < 2
    },
    customerUrl() {
      return window.location.origin + '/credit-h5/#/'
    },
  },
  watch: {
    relatedSignType: {
      handler: function (val) {
        this.isOnlineSign = val
      },
      immediate: true,
    },
    bankId() {
      this.onlineBankId = this.bankId || this.projectData.bank_id || ''
    },
    projectData: {
      handler: function () {
        this.onlineBankId = this.bankId || this.projectData.bank_id || ''
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    handleCopy(value) {
      const success = copyText(value)
      if (success) {
        this.$message.success('已复制到粘贴板')
      } else {
        this.$message.error('已复制到粘贴失败')
      }
    },
    handleSignView() {
      this.viewSignVisible = true
    },
    handleSignTypeChange(val) {
      if (val === '1') {
        this.isOnlineSign = this.relatedSignType
        this.onlineVisible = true
      } else {
        this.updateSignType(val)
      }
    },
    handleAfterData(res) {
      this.$emit('after-data', res)
    },

    updateSignType(type) {
      if (this.loading || !this.editable) return Promise.resolve(false)
      this.loading = true
      return this.putData({
        customer_related_id: this.relatedId,
        is_online_sign: type,
      })
        .then(() => {
          this.$emit('type-change', type)
        })
        .finally(() => {
          this.loading = false
        })
    },
    putData(data) {
      return this.$api
        .updateData({
          table: 'customer_related',
          id: this.relatedId,
          data,
        })
        .catch(err => {
          this.$message.error('更改签约类型失败')
          throw err
        })
    },

    // 线上银行选择
    handleSelectBank(bank) {
      this.onlineSelectBank.bank_type = bank.agency_type_sub || ''
      this.onlineSelectBank.bank_name = bank.agency_name || ''
    },
    handleBankDismiss() {
      // this.onlineBankId = ''
      // this.onlineSelectBank = {}
      this.onlineVisible = false
    },
    updateOnlineType() {
      if (!this.onlineBankId) {
        return this.$message.error('请选择银行！')
      }

      this.onlineLoading = true
      return this.putData({
        customer_related_id: this.relatedId,
        is_online_sign: 1,
        bank_id: this.onlineBankId,
        ...this.onlineSelectBank,
      })
        .then(() => {
          this.$emit('type-change', 1)
          this.onlineVisible = false
        })
        .finally(() => {
          this.onlineLoading = false
        })
    },
  },
}
</script>

<style lang="scss" scoped></style>
